<template>
  <view class="training-list-page">
    <!-- 搜索栏 -->
    <view class="search-section">
      <view class="search-bar-container">
        <text class="iconfont-v2 icon-sousuo search-icon"></text>
        <input 
          class="search-input" 
          placeholder="请输入关键字" 
          v-model="searchKeyword" 
          @confirm="handleSearch" 
        />
        <button class="search-btn" @click="handleSearch">
          <text>搜索</text>
        </button>
      </view>
    </view>

    <!-- 培训课程列表 -->
    <view class="training-list">
      <view 
        class="training-card" 
        v-for="(course, index) in trainingList" 
        :key="index"
        @click="goCourseDetail(course)"
      >
        <!-- 课程缩略图 -->
        <view class="course-thumbnail">
          <image :src="course.thumbnail" :alt="course.title" />
        </view>

        <!-- 课程信息 -->
        <view class="course-info">
          <text class="course-title">{{ course.title }}</text>
          
          <!-- 课程标签 -->
          <view class="course-tags">
            <text class="tag" v-for="(tag, tagIndex) in course.tags" :key="tagIndex">
              {{ tag }}
            </text>
          </view>

          <!-- 时间信息 -->
          <view class="time-info">
            <text class="iconfont-v2 icon-shijian clock-icon"></text>
            <text class="time-text">{{ course.time }}</text>
          </view>

          <!-- 报名信息 -->
          <view class="enrollment-info">
            <text class="iconfont-v2 icon-navicon-bmjl person-icon"></text>
            <text class="enrollment-text">{{ course.enrollment }}</text>
          </view>

          <!-- 价格信息 -->
          <view class="price-info">
            <text class="current-price">¥{{ course.price }}</text>
            <text class="original-price" v-if="course.originalPrice">¥{{ course.originalPrice }}</text>
            <button class="enroll-btn" @click.stop="enrollCourse(course)">
              <text>立即报名</text>
            </button>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <view class="load-more" v-if="hasMore" @click="loadMore">
      <text class="load-more-text">加载更多</text>
    </view>

    <!-- 没有更多 -->
    <view class="no-more" v-else>
      <text class="no-more-text">没有更多了</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: "",
      hasMore: true,
      
      // 培训课程数据
      trainingList: [
        {
          id: 1,
          title: "英语四级强化训练",
          thumbnail: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          tags: ["热门", "推荐"],
          time: "2024-01-15 14:00",
          enrollment: "1250人已报名",
          price: "199",
          originalPrice: "299"
        },
        {
          id: 2,
          title: "数学基础强化",
          thumbnail: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          tags: ["新课程"],
          time: "2024-01-16 10:00",
          enrollment: "980人已报名",
          price: "159",
          originalPrice: "229"
        },
        {
          id: 3,
          title: "考研英语冲刺",
          thumbnail: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          tags: ["热门", "冲刺"],
          time: "2024-01-17 16:00",
          enrollment: "2100人已报名",
          price: "299",
          originalPrice: "399"
        },
        {
          id: 4,
          title: "计算机基础入门",
          thumbnail: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          tags: ["入门"],
          time: "2024-01-18 09:00",
          enrollment: "650人已报名",
          price: "99",
          originalPrice: "149"
        },
        {
          id: 5,
          title: "物理实验指导",
          thumbnail: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          tags: ["实验"],
          time: "2024-01-19 13:00",
          enrollment: "420人已报名",
          price: "129",
          originalPrice: "179"
        },
        {
          id: 6,
          title: "化学方程式解析",
          thumbnail: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          tags: ["解析"],
          time: "2024-01-20 15:00",
          enrollment: "380人已报名",
          price: "89",
          originalPrice: "129"
        }
      ]
    }
  },
  methods: {
    handleSearch() {
      if (this.searchKeyword.trim()) {
        console.log("搜索培训课程:", this.searchKeyword);
        uni.showToast({
          title: `搜索: ${this.searchKeyword}`,
          icon: 'none'
        });
      } else {
        uni.showToast({
          title: "请输入搜索关键字",
          icon: 'none'
        });
      }
    },
    goCourseDetail(course) {
      console.log("查看课程详情:", course);
      uni.navigateTo({
        url: `/pages/fast/course-detail?id=${course.id}`
      });
    },
    enrollCourse(course) {
      console.log("报名课程:", course);
      uni.showModal({
        title: "确认报名",
        content: `确定要报名《${course.title}》吗？`,
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: "报名成功",
              icon: 'success'
            });
          }
        }
      });
    },
    loadMore() {
      console.log("加载更多课程");
      uni.showToast({
        title: "加载更多",
        icon: 'none'
      });
      
      // 模拟加载更多数据
      setTimeout(() => {
        // 这里可以添加更多课程数据
        this.hasMore = false;
      }, 1000);
    }
  }
}
</script>

<style lang="scss" scoped>
.training-list-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.search-section {
  background: white;
  padding: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

  .search-bar-container {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border-radius: 50rpx;
    padding: 20rpx 30rpx;
    gap: 20rpx;

    .search-icon {
      font-size: 32rpx;
      color: #999;
    }

    .search-input {
      flex: 1;
      border: none;
      outline: none;
      background: transparent;
      font-size: 28rpx;
      color: #333;

      &::placeholder {
        color: #999;
      }
    }

    .search-btn {
      background: #ED6567;
      color: white;
      border: none;
      border-radius: 40rpx;
      padding: 16rpx 32rpx;
      font-size: 28rpx;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background: #d55a54;
      }

      text {
        color: white;
      }
    }
  }
}

.training-list {
  padding: 20rpx;

  .training-card {
    background: white;
    border-radius: 24rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-4rpx);
      box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
    }

    .course-thumbnail {
      width: 100%;
      height: 200rpx;

      image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .course-info {
      padding: 30rpx;

      .course-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 16rpx;
        display: block;
        line-height: 1.3;
      }

      .course-tags {
        display: flex;
        gap: 12rpx;
        margin-bottom: 16rpx;

        .tag {
          background: #f0f0f0;
          color: #666;
          padding: 6rpx 16rpx;
          border-radius: 20rpx;
          font-size: 20rpx;
          font-weight: 500;
        }
      }

      .time-info {
        display: flex;
        align-items: center;
        gap: 8rpx;
        margin-bottom: 12rpx;

        .clock-icon {
          font-size: 24rpx;
          color: #999;
        }

        .time-text {
          font-size: 24rpx;
          color: #666;
        }
      }

      .enrollment-info {
        display: flex;
        align-items: center;
        gap: 8rpx;
        margin-bottom: 20rpx;

        .person-icon {
          font-size: 24rpx;
          color: #999;
        }

        .enrollment-text {
          font-size: 24rpx;
          color: #666;
        }
      }

      .price-info {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .current-price {
          font-size: 32rpx;
          font-weight: 600;
          color: #ED6567;
        }

        .original-price {
          font-size: 24rpx;
          color: #999;
          text-decoration: line-through;
          margin-left: 12rpx;
        }

        .enroll-btn {
          background: #ED6567;
          color: white;
          border: none;
          border-radius: 40rpx;
          padding: 16rpx 32rpx;
          font-size: 26rpx;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.3s ease;

          &:hover {
            background: #d55a54;
          }

          text {
            color: white;
          }
        }
      }
    }
  }
}

.load-more,
.no-more {
  text-align: center;
  padding: 40rpx;

  .load-more-text,
  .no-more-text {
    font-size: 28rpx;
    color: #666;
  }
}

.load-more {
  cursor: pointer;

  &:hover .load-more-text {
    color: #ED6567;
  }
}
</style>